
import { memo, useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import classNames from 'classnames';

export interface Props {
  className?: string;
  title?: string;
  state: unknown
}

function VoltageChart<Props>(props: Props) {
  const { state } = props;
  const domRef = useRef(null);
  const value = 0

  const [chart, setChart] = useState()

  const updateValue = () => {
    if (!chart) {
      return;
    }
    const series = [
      // {
      //   data: state.voltage1
      // },
      // {
      //   data: state.voltage2
      // },
      // {
      //   data: state.voltage3
      // },
      // {
      //   data: state.voltage4
      // },
      // {
      //   data: state.voltage5
      // },
      {
        data: state.voltage5
      },

    ]

    chart.setOption({
      series,
    });
  };
  useEffect(() => {
    updateValue();
  }, [state]);


  const initChart = () => {
    const instance = echarts.init(domRef.current, 'purple');


    const pieNum = (value * 100) / 360
    const colorSet = {
      color: 'rgba(59,191,253,1)',
    }

    instance.setOption({

      tooltip: {
        trigger: 'axis'
      },
      legend: {
        // data: ['第一路电压', '第二路电压', '第三路电压', '第四路电压', '第五路电压', '第六路电压']
        data: ['第六路电压']
      },
      grid: {
        top: '10',
        left: '10',
        right: '10',
        bottom: '40',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: { show: true },   // 显示底部的 X 轴线
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false }, // 不显示网格线
      },
      yAxis: {
        type: 'value',
        // min: 'dataMin',  // 自动取数据最小值
        // max: 'dataMax'   // 自动取数据最大值
        axisLine: { show: true },   // 显示左侧的 Y 轴线
        axisTick: { show: true },
        axisLabel: { show: true },
        splitLine: { show: false }  // 不显示横向网格线
      },


      series: [

        {
          name: '电压',
          type: 'line',
          data: state.voltage5,
          showSymbol: false
        },
      ]
    });
    window.addEventListener('resize', function () {
      instance.resize();
    });


    setChart(instance)
  }
  useEffect(() => {
    initChart();
  }, [])

  return (
    <div ref={domRef} className={classNames('size-full h-56', props.className)}></div>
  );
}

export default memo(VoltageChart)
